Bubble Charts

To display a bubble chart, use the Chart control and add a BubbleSeries to the chart. The BubbleSeries must specify an ItemsSource, which is a collection containing the data to be displayed, and a XBinding, a YBinding and a SizeBinding, which are data bindings specifying how the locations and sizes of the bubbles are determined from the data.

CopyCreating a bubble chart

<ms:Chart Title="Sales">
  <ms:ScatterSeries ItemsSource="{Binding}" 
                    XBinding="{Binding RegionGeoX}" 
                    YBinding="{Binding RegionGeoY}" 
                    SizeBinding="{Binding Amount}" 
                    />
</ms:Chart>

To change the color of the bubbles, set the SeriesBrush property:

CopyChanging the bubble color

<ms:BubbleSeries SeriesBrush="Red" />

The Chart control will apply a lighting effect to the brush to give it the “bubble” appearance. To override this effect with your own, use the BubbleStyle property. The target type of the BubbleStyle should be Bubble, and you will typically style the Template property.

CopyBasic front-lit bubbles

<ms:BubbleSeries SeriesBrush="Red" />
  <ms:BubbleSeries.BubbleStyle>
    <Style TargetType="ms:Bubble">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ms:Bubble">
            <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
              <Ellipse Fill="{TemplateBinding Background}" />
              <Ellipse>
                <Ellipse.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0" Color="#80FFFFFF" />
                    <GradientStop Offset="0.8" Color="#00FFFFFF" />
                  </RadialGradientBrush>
                </Ellipse.Fill>
              </Ellipse>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:BubbleSeries.BubbleStyle>
</ms:BubbleSeries>